<?php
echo $this->headLink()->setStylesheet($this->baseUrl().'/js/jquery/jqueryFileTree/jqueryFileTree.css');

echo $this->headScript()->setFile($this->baseUrl().'/js/codemirror/lib/codemirror.js');
echo $this->headScript()->setFile($this->baseUrl().'/js/codemirror/ui/codemirror-ui.js');
echo $this->headScript()->setFile($this->baseUrl().'/js/codemirror/mode/javascript/javascript.js');
echo $this->headScript()->setFile($this->baseUrl().'/js/codemirror/mode/htmlmixed/htmlmixed.js');
echo $this->headScript()->setFile($this->baseUrl().'/js/codemirror/mode/css/css.js');
echo $this->headScript()->setFile($this->baseUrl().'/js/codemirror/mode/xml/xml.js');
echo $this->headScript()->setFile($this->baseUrl().'/js/codemirror/mode/php/php.js');
echo $this->headScript()->setFile($this->baseUrl().'/js/codemirror/mode/clike/clike.js');

echo $this->headLink()->setStylesheet($this->baseUrl().'/js/codemirror/lib/codemirror.css');
echo $this->headLink()->setStylesheet($this->baseUrl().'/js/codemirror/ui/codemirror-ui.css');
echo $this->headLink()->setStylesheet($this->baseUrl().'/js/codemirror/mode/javascript/javascript.css');
echo $this->headLink()->setStylesheet($this->baseUrl().'/js/codemirror/mode/xml/xml.css');
echo $this->headLink()->setStylesheet($this->baseUrl().'/js/codemirror/mode/css/css.css');
echo $this->headLink()->setStylesheet($this->baseUrl().'/js/codemirror/mode/clike/clike.css');
?>
<style type="text/css">
.CodeMirror{width:100% !important; height:800px;}
.CodeMirror, .codemirror-ui-clearfix{width:100% !important;}
.CodeMirror-lines{width:800px !important}
</style>
<script type="text/javascript">
$(document).ready(function() {
	
	//floatingbar('#floatingbar',"#button_top_bar",null);	
	
	var editor = openCodeMirror('body_template');
	$('#theme_list').change(function(){
		$('a.edit_btn').attr('rel', '');
		$('#file_list').val('');
		$('#show_files').html('');
		closeCodeMirror('body_template');	
		openCodeMirror('body_template');
	});
	
	$('#file_list').change(function(){
		var self = this;
		$('a.edit_btn').attr('rel', '');
		closeCodeMirror('body_template');	
		openCodeMirror('body_template');
		var file_type = $(self).val();
		if(file_type == '')
		{
			$('#show_files').html('');
		}
		else
		{
			var folder_name = $('#theme_list').val();
			$.ajax({
				url: "<?php echo $this->url( array('module' => 'Theme','controller' => 'template', 'action'     => 'show' ), 'adminrout',    true) ?>",
					type: 'POST',
					data: { folder_name : folder_name, file_type : file_type },
					beforeSend: function(){						
							removeError();
							openLoaderDialog();										
						 },
					success: function(response){	
						//alert(response);				
						var json_arr = eval("("+response+")");
						closeLoaderDialog();
						if(json_arr.status == 'ok')
						{
							var putHTML = "<ul class=\"jqueryFileTree\">";						
							putHTML += "<li class=\"directory collapsed\"><b>" + folder_name + "</b>";
							putHTML	+= "<ul>";
							var ext = (file_type == 'blocks' || file_type == '-') ? 'phtml' : file_type;
							if(json_arr.files && json_arr.files.length > 0)
							{								
								for(var i = 0; i < json_arr.files.length; i++)
								{
									putHTML += "<li class=\"file ext_"+ext+"\"><a href=\"javascript:void(0);\" class=\"file_link\" rel=\"" + folder_name + "," + file_type + "," + json_arr.files[i] + "\">" + json_arr.files[i] + "</a></li>";
								}
							}
							putHTML	+= "</ul>";
							putHTML += "</li></ul>";
							$('#show_files').html(putHTML);
							read();
						}						
						else
						{
							openMsgDialog(msg);
						}
					},
					error: function(xhr, status, error){
						closeLoaderDialog();
						var msg = "Error! " + xhr.status + " " + error;
						openMsgDialog(msg);
					}
			});
		}
	});
	
	
	
		
});

function edit(editor)
{
	$('a.edit_btn').unbind('click');
	$('a.edit_btn').click(function(){
		var self = this;
		var file_type = $('#file_list').val();
		var folder_name = $('#theme_list').val();
		var file_name = $('a.edit_btn').attr('rel');
		var file_content = editor.mirror.getValue();
		if(file_name == '')
		{
			var msg = "<?php echo $this->translator->translator('editors_file_not_found_err', '', 'Editors'); ?>";
			openMsgDialog(msg);
		}
		else
		{
			try {
				$.ajax({
					url: "<?php echo $this->url( array('module' => 'Theme','controller' => 'template', 'action'     => 'edit' ), 'adminrout',    true) ?>",
						type: 'POST',
						data: { file_type : file_type, folder_name : folder_name, file_name : file_name, file_content : file_content },
						beforeSend: function(){						
								removeError();
								openLoaderDialog();											
							 },
						success: function(response){	
							//alert(response);				
							var json_arr = eval("("+response+")");
							closeLoaderDialog();
							if(json_arr.status == 'ok')
							{						
								$('#actionMessage').html(succMsgDesign(json_arr.msg));											
							}
							else
							{
								$('#actionMessage').html(errMsgDesign(msg));
							}
						},
						error: function(xhr, status, error){
							closeLoaderDialog();
							var msg = "Error! " + xhr.status + " " + error;
							$('#actionMessage').html(errMsgDesign(msg));
						}
				});
			} 
			catch(e) {
				var msg = "Error! " + e.description;
				$('#actionMessage').html(errMsgDesign(msg));
			}
		}
	});	
}

function read()
{
	$('a.file_link').unbind('click');
	$('a.file_link').click(function(){
		var self = this;
		var rel = $(self).attr('rel');
		if(rel)
		{
			$.ajax({
				url: "<?php echo $this->url( array('module' => 'Theme','controller' => 'template', 'action'     => 'read' ), 'adminrout',    true) ?>",
					type: 'POST',
					data: { file_rel : rel },
					beforeSend: function(){						
							removeError();
							openLoaderDialog();										
						 },
					success: function(response){	
						//alert(response);				
						var json_arr = eval("("+response+")");
						closeLoaderDialog();
						if(json_arr.status == 'ok')
						{
							closeCodeMirror('body_template');	
							var editor = openCodeMirror('body_template');
							editor.mirror.setValue(json_arr.file_content);
							$('a.edit_btn').attr('rel', json_arr.file_name);
							edit(editor);
						}
						else if(json_arr.status == 'errW')
						{
							closeCodeMirror('body_template');	
							var editor = openCodeMirror('body_template');
							editor.mirror.setValue(json_arr.file_content);
							$('#file_path_'+id_sufix).val(json_arr.file_path);
							$('#file_'+id_sufix).html(json_arr.file_name);				
							
							$('#actionMessage').html(errMsgDesign(json_arr.msg));	
							$('a.edit_btn').attr('rel', '');					
						}						
						else
						{
							openMsgDialog(json_arr.msg);
							$('a.edit_btn').attr('rel', '');
						}
					},
					error: function(xhr, status, error){
						closeLoaderDialog();
						var msg = "Error! " + xhr.status + " " + error;
						openMsgDialog(msg);
						$('a.edit_btn').attr('rel', '');
					}
			});
		}
	});	
}

function openMsgDialog(msg)
{
	$('#dialog_msg').html(msg).dialog({
		autoOpen: true,
		modal: true,
		show: 'fade',
		resizable: 'false',				
		buttons: { "<?php echo html_entity_decode($this->translator->translator('common_ok'), ENT_QUOTES, 'UTF-8'); ?>": function() { $(this).dialog('option', 'hide', 'explode').dialog("close"); } },
		open: function(event, ui)
			 {
				setTimeout(function() 
				{									
					if($('#' + event.target.id).dialog('isOpen'))
					{
						$('#' + event.target.id).dialog('option', 'hide', 'explode').dialog('close');										
					}
				}, 10000);
			  }
	});
}

function closeCodeMirror(id)
{
	$('#'+id).css('display','inline');	
	var element = $('#'+id).parent();
	$('div.codemirror-ui-clearfix').parent().remove();
	$('div.CodeMirror').remove();					
}

function openCodeMirror(id)
{
	//first set up some variables
	var textarea = document.getElementById(id);
	var uiOptions = { path : 'js/codemirror', searchMode : 'popup' }
	var codeMirrorOptions = { mode: "application/x-httpd-php", lineNumbers: true}
	
	//then create the editor	
	var editor = new CodeMirrorUI(textarea,uiOptions,codeMirrorOptions);
	return 	editor;									
}

function removeError()
{
	$('#body_template').html('');
	$('#actionMessage').html('');				
}

function openLoaderDialog()
{
	$('#dialog_loader').dialog({
		autoOpen: true,
		modal: true,
		show: 'fade',
		resizable: 'false',				
		open: function(event, ui)
			 {
				$("#progressbar").progressbar({
					value:100
	
				});							
			  }
	});
}

function closeLoaderDialog()
{
	$('#dialog_loader').dialog('option','hide','explode').dialog('close');
}
</script>

<div id="container">
<?php if (!$this->allow('edit')) : ?>
	<div class="grid_12 t_a_bottom">
		<?php echo $this->translator->translator('Member_Access_deny_desc'); ?>
	</div>
<?php else : ?>

<div class="title-container">
	<div class="theme-editors"><h1><?php echo $this->translator->translator('theme_template_page_name_edit'); ?></h1></div>
</div>

<div class="content-container">
	<div id="sidebar-inner">
    	<?php echo $this->partial('backendjquery/nav_menu.phtml');  ?>
        <div>&nbsp;</div>
        <div id="nav-tree">
        	<div class="nav-header"><div class="nav-title"><?php echo $this->translator->translator('theme_template_page_file_list'); ?></div></div>
        	<div id="show_files" class="nav-body treebody"></div>
      	</div>
    </div>
   
    <div id="content-inner">
    	<div id="actionMessage"></div>
    	 <fieldset class="fieldset last"> 
         	<div class="editor-button-container">
            				<span class="button  ui-widget-content-1">
                            <strong><?php echo $this->translator->translator('theme_template_page_select_theme_label'); ?></strong>&nbsp;&nbsp;&nbsp;
                            <select name="theme_list" id="theme_list">
                            <?php
							if($this->theme_list)
							{
								foreach($this->theme_list as $theme_folder => $theme_name)
								{
									$selected = ($theme_folder == $this->theme_folder) ? 'selected="selected"' : '';
							?>
                            	<option value="<?php echo $theme_folder; ?>" <?php echo $selected; ?>><?php echo $this->escape($theme_name); ?></option>
                            <?php
								}
							}
							?>
                            </select>
                            </span>
                            <span class="button  ui-widget-content-1">
                                <select name="file_list" id="file_list">
                                	<option value=""><?php echo $this->translator->translator('theme_template_select_file'); ?></option>
                                    <option value="-"><?php echo $this->translator->translator('theme_template_html_file'); ?></option>
                                    <option value="blocks"><?php echo $this->translator->translator('theme_template_block_file'); ?></option>
                                    <option value="head"><?php echo $this->translator->translator('theme_template_header_file'); ?></option>
                                    <option value="css"><?php echo $this->translator->translator('theme_template_css_file'); ?></option>
                                    <option value="js"><?php echo $this->translator->translator('theme_template_js_file'); ?></option>
                                </select>
                            </span>
                            <span class="select-btn ui-widget-content-1"><a href="javascript:  void(0);" class="edit_btn edit_btn_global" rel=""><span class="icon save"><?php echo $this->translator->translator('common_save'); ?></span></a></span>
                        </div>
                        <div class="clr"></div>
             <legend class="legend" id="file_global"><?php echo $this->translator->translator('theme_template_edit_fieldset'); ?></legend>
             <input type="hidden" name="file_path_global" id="file_path_global" value="" />
			<textarea name="body_template" id="body_template" style="display:none;" cols="150" rows="50"></textarea>
         </fieldset>		
  	</div>
</div>

<?php endif; ?>
<div id="dialog_msg" title="<?php echo $this->translator->translator('common_dialog_msg',$this->translator->translator('theme_template_page_name_edit')); ?>"></div>
<div id="dialog-confirm" title="<?php echo $this->translator->translator('common_confirmation',$this->translator->translator('common_delete')); ?>"></div>	
<div id="dialog_loader" style="display:none" title="<?php echo $this->translator->translator('common_processing_language'); ?>">
	<div id="progressbar" ></div>	
</div>
</div>